import React from 'react'
import {connect} from 'react-redux'

import './ContentList.scss'
import ListItem from 'component/ListItem/ListItem.jsx'
import ScrollView from 'component/ScrollView/ScrollView.jsx'
import {getContentListData} from '../../actions/contentListAction.js'

class ContentList extends React.Component{
  constructor(props){
    super(props)
    this.page = 0
    this.fetchData(this.page)

    this.state = {
      isend: false,
      loadingText: '加载中...'
    }
  }
  onLoadPage(){
    this.page++
    if(this.page > 3){
      this.setState({
        isend: true,
        loadingText: '加载完成'
      })
    }else{
      this.fetchData(this.page)
    }
  }
  fetchData(page){
    this.props.dispatch(getContentListData(page))
  }
  renderItems(){
    let lists = this.props.lists
    console.log(lists)
    return lists.map((list, index) => {
      return(
        <ListItem key={index} itemData={list}></ListItem>
      )
    })
  }
  render(){
    return(
      <div className='list-content'>
        <h4 className="list-title">
          <span className="title-line"></span>
          <span>附近商家</span>
          <span className="title-line"></span>
        </h4>
        <ScrollView loadCallback={this.onLoadPage.bind(this)} isend={this.state.isend}>
          {this.renderItems()}
        </ScrollView>
      </div>
    )
  }
}

export default connect(
  state => ({
    lists: state.contentListReducer.lists
  })
)(ContentList)